<template>
	<view class="list-container">
		<!-- 调用了topicItem组件，每个列表项都是用了topicItem组件，通过v-for指令遍历list数组中的每个元素，并将其作为info属性传递给组件。 -->
		<topicItem class="item" :info="item" v-for="(item, index) in list"></topicItem>
		<!-- 如果list数组为空的话，则显示NoData组件 -->
		<view style="height: 80vh;overflow: hidden;"  v-if="!list.length">
				<NoData></NoData>
		</view>
		
		<!-- 如果不为空或者为真，现实NoMore组件 -->
		<NoMore v-else-if="noMore"></NoMore>
	</view>
</template>

<script>
import topicItem from "./components/topicItem.vue"
export default {
	components: {
		topicItem
	},
	data() {
		return {
			title: '全部动态',
			list: [],
			perPage: 8,
			page: 1,
			noMore: false,
			tagId: '',
			groupId: ''
		}
	},
	computed: {},
	watch: {},
	onLoad(e) {
		// 如果事件对象中的标题存在，则使用事件对象中的标题，否则就是用默认标题
		this.title = e.title || this.title
		// 使用uni.setNavigationBarTitle方法动态设置导航栏标题
		uni.setNavigationBarTitle({
			title: this.title
		})

		// 如果事件对象中的tagId存在，则使用事件对象中的tagId，否则就是用空字符串
		this.tagId = e.tagId || ''
		// 如果事件对象中的groupId存在，则使用事件对象中的groupId，否则使用空字符串
		this.groupId = e.groupId || ''

		// 使用uni.showLoading方法显示加载提示
		uni.showLoading({
			title: '加载中'
		})
		// 调用 initDate 方法获取数据，并在数据加载完成后隐藏加载提示
		this.initData().then(res => {
			uni.hideLoading()
		})
	},
	onShow() {
	},
	onPullDownRefresh() {
		this.$showPullRefresh()
		this.list = []
		this.page = 1
		this.initData()
	},
	onReachBottom() {
		this.initData()
	},
	methods: {
		initData() {
			if (this.noMore) {
				return false
			}

			return this.$http('/topics', 'GET', {
				'tagId': this.tagId,
				'groupId': this.groupId,
				'per_page': this.perPage,
				'page': this.page
			}).then(res => {
				this.list.push(...res.data.list)
				this.page++
				if (this.page > res.data.page_total) {
					this.noMore = true
				}
			})
		}
	},
	onPageScroll(e) { }
}
</script>

<style lang="scss" scoped>
page {
	background-color: #151515;
}

.list-container {
	padding: 50rpx 30rpx;
}
</style>
